<template>
    <v-chart ref="chart" :class="{chart,  clsborder: propValue.border }" :option="propValue.option" />
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { ScatterChart, BarChart, LineChart } from 'echarts/charts'
import OnEvent from '../common/OnEvent'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import VChart from 'vue-echarts'

use([
    CanvasRenderer,
    ScatterChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent,
    BarChart,
    LineChart,
])

export default {
    components: {
        VChart,
    },
    extends: OnEvent,
    props: {
        propValue: {
            type: Object,
            require: true,
            default: () => {},
        },
        element: {
            type: Object,
            default: () => {},
        },
    },
    watch: {
        'element.style.width': function () {
            const chart = this.$refs.chart
            if (chart) {
                chart.resize()
            }
        },
        'element.style.height': function () {
            const chart = this.$refs.chart
            if (chart) {
                chart.resize()
            }            
        },

        'element.hg3000.linkids': {
            handler(newVal, oldVal) {
                //增加曲线
                if( newVal.length > this.propValue.option.color.length ){
                    this.propValue.option.color.push( '#ff0000' )

                    const randomArray = Array.from({ length: 5 }, () => Math.floor(Math.random() * 11));
                    console.log( randomArray )
                    this.propValue.option.series.push( { name: newVal[newVal.length-1].descr, type: 'line',
                    data: randomArray,  smooth: true, symbol: 'none',
                     } )
                }
                //删除曲线
                if( newVal.length < this.propValue.option.color.length ){
                    //先判断是删除了哪一个元素
                    // console.log("del element", this.propValue.option.color.length)
                    let delpos = -1

                    for( var i=0; i<this.propValue.option.color.length; i++ ){
                        if( i >= newVal.length ){
                            delpos = i
                            break
                        }
                        if( this.propValue.option.series[i].name != newVal[i].descr  ){
                            delpos = i
                            break ;
                        }
                    }
                    if( delpos >=0 ){
                        this.propValue.option.color.splice( delpos, 1 )
                        this.propValue.option.series.splice( delpos, 1 )
                    }
                    this.$refs.chart.setOption( this.propValue.option, true )
                }
                //更改曲线
                if( newVal.length == this.propValue.option.color.length ){
                    for( var i=0; i<newVal.length; i++){
                        this.propValue.option.series[i].name = newVal[i].descr
                    }
                    this.$refs.chart.setOption( this.propValue.option, true )
                }
            },
            deep: true,
        },

        //实时数据刷新
        'propValue.rtDataIns': function () {
            //先初始化图形
            // console.log( "init 1:", this.bInit )
            // console.log( "init 2:", this.propValue.pointNums, typeof this.propValue.pointNums )
            
            if(  !this.bInit ){
                this.optionLocal = JSON.parse( JSON.stringify( this.propValue.option ) )
                //清空数据，数组留出空间
                this.optionLocal.xAxis.data =   Array( parseInt(this.propValue.pointNums) ).fill('')
                // console.log( "xAxis: ", new Array(40).fill(''), this.optionLocal.xAxis.data )
                for( var i=0; i<this.optionLocal.series.length; i++){
                    this.optionLocal.series[i].data =  Array(parseInt(this.propValue.pointNums)).fill(null)
                }
                // this.$refs.chart.setOption( this.optionLocal, true )
                this.bInit = true
                // console.log( "init:", this.optionLocal.series )
            }
            //对每一条线弹出最开始的，在尾部加一个
            // console.log( "get data", this.propValue.rtdata )
            for( var i=0; i < this.propValue.rtdata.length; i++){
                if( i < this.optionLocal.series.length ){
                    this.optionLocal.series[i].data.push( this.propValue.rtdata[i] )
                    this.optionLocal.series[i].data.shift()
                }
            }
            // console.log( "fresh:", this.optionLocal.series )
            this.$refs.chart.setOption( this.optionLocal, true )

        },

    },  //end watch

    mounted(){
    },

    data() {
        return {
            optionLocal: {},
            bInit: false ,
        }
    },

    methods: {
        addPoints(  ){
            
        },
    },
}
</script>

<style scoped>
.chart {
    height: 400px;
    /* border: 1px solid black; */
}

.clsborder {
    border: 1px solid black;
}
</style>
